<!DOCTYPE html>
<html>
<head>
	<title>vue-preview</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script type="module">
import { compile } from './esm_modules/vue-inbrowser-compiler/index.js'
/**
 * render a component
 */
function getComponent(code) {
  const conpiledCode = compile(
    code,
    // pass in config options to buble to set up the output
    {
      target: { ie: 11 },
      transforms: { asyncAwait: false },
      modules: false
    }
  )
  let styleEl = document.createElement('style');
  styleEl.textContent = conpiledCode.style;
  document.head.appendChild(styleEl);
  const func = new Function(conpiledCode.script)
  return func()
}
window.onmessage = (e) => {
  if (e.data.method === 'refresh') {
  	let Com = Vue.extend(getComponent(e.data.payload.content));
  	new Vue({
		  render(h){
		    return h('div', {
		    	domProps: {
		    		id: 'app'
		    	}
		    }, [
		    	h(Com)
		    ])
		  }
		}).$mount('#app');
  }
}
</script>
</body>
</html>